.page-container
  &--override
    width: calc(100vw - 64px)
    position: relative
    left: calc((100% - 100vw)/2 + 30px)
    &.no-scroll
      width: calc(100vw - 60px)
    .btn
      font-size: 12px
      padding: 0 20px
      line-height: 33px
      height: 33px
      &.btn-secondary
        color: #ffffff
        text-shadow: 0 1px 0 rgba(0,0,0,.1)
        background-color: #2a6cd1
        background-image: -webkit-gradient(linear,left top,left bottom,from(#3274d9),to(#1f60c4))
        background-image: -webkit-linear-gradient(top,#3274d9,#1f60c4)
        background-image: -o-linear-gradient(top,#3274d9,#1f60c4)
        background-image: linear-gradient(180deg,#3274d9,#1f60c4)
        background-repeat: repeat-x
        border-color: #3274d9
      &.btn-grey
        color: #b8b8b8
        font-size: 12px
        background-color: #272729
        padding: 8px 10px
        box-shadow: 1px 1px 1px 0 black
        height: 30px
        line-height: 15px
        white-space: nowrap
        margin: 0 10px
        width: fit-content
      .fa.override--fa
        top: 0
    .page-header
      background-color: #222326
      padding: 32px 60px 0 60px
      .header-btn
        display: flex
        &__editor .fa
          height: 33px
          line-height: 33px
      .mobile-btn
        display: none
        flex-direction: column
        height: 30px
        &_body
          display: flex
          position: absolute
          flex-direction: column
          background-color: #2d2d30
          z-index: 1
          border-radius: 3px
          box-shadow: 1px 1px 1px 0 black
          margin-left: -30px
          &.active
            display: flex
          a
            padding: 5px 15px
            &:hover
              background: #212124
      .row
        display: flex
        justify-content: space-between
        margin: 0
        padding-right: 6px
        flex-wrap: nowrap
        .gf-tabs
          margin-left: 10px
      .btn
        margin: 0 10px
        float: initial
      .hr
        height: 1px
        background-color: #343436
        margin: 0 -60px
    .page-body--override
      padding: 28px 60px 0
      .header
        display: flex
        justify-content: space-between
      .title
        cursor: pointer
        display: flex
        margin-top: 2px
        h1
          font-size: 24px
          color: #eaeaea
          line-height: 24px
          font-weight: normal
          margin-bottom: initial
      .status
        font-size: 14px
        color: #8e8e8e
        margin: 4px 0 0 20px
        min-width: 90px
        text-align: end
        span
          color: #c04c21
      .overview-panel
        background-color: #2d2d30
        border-radius: 3px
        padding: 16px 16px
        display: flex
        flex-direction: column
        margin-bottom: 10px
        &_header
          display: flex
          justify-content: space-between
          padding-bottom: 24px
        &_body
          display: flex
          justify-content: space-between
          color: #b8b8b8
          margin-top: 24px
          h2
            font-size: 18px
            font-weight: normal
            color: #b8b8b8
            margin-bottom: 20px
            line-height: 18px
          &_components
            display: flex
            flex-direction: column
            font-size: 14px
            margin-right: 20px
            .component
              margin-bottom: 8px
              display: flex
          &_namespaces
            display: flex
            align-content: flex-start
            flex-flow: wrap
            max-width: 700px
        &_btn
          display: flex
          min-width: 313px
          justify-content: flex-end
          span
            margin: 0 10px
          span:last-child
            margin-right: 0
      .namespace-panel
        background-color: #212124
        margin-bottom: 10px
        padding: 16px 0
        border-radius: 3px
        .header
          padding: 0 16px
        &_btn
          display: flex
          flex-wrap: wrap
        &_body
          display: flex
          margin-top: 24px
          .column
            width: 100%
            display: flex
            flex-direction: column
            border-right: 1px solid #161719
            &:last-child
              border: none
            &_header
              display: flex
              justify-content: space-between
              h3
                color: #b8b8b8
                font-size: 18px
                margin: 0 0 24px 10px
            &_cell
              display: flex
              flex-direction: column
              border-bottom: 1px solid #161719
              margin-bottom: 6px
              padding: 0 10px 12px
              .btn-grey
                width: fit-content
                margin-top: 10px
              i
                color: #b8b8b8
                font-size: 12px
                &:hover
                  color: #eaeaea
              h4
                margin-bottom: 6px
              &:last-child
                border: none
              &_header
                font-size: 14px
                color: #8e8e8e
                span
                  color: #eaeaea
              .pod
                display: flex
                line-height: initial
                font-size: 12px
                color: #b8b8b8
                &_title
                  top: 3px
                  position: relative
              .services
                margin-top: 12px
                color: #8e8e8e
                h5
                  font-size: 14px
                  line-height: initial
                  margin-left: 14px
                  color: #b8b8b8
                  margin-bottom: 6px
                .service
                  display: flex
                  margin-left: 6px
                  &_title
                    color: #b8b8b8
                    line-height: initial
                    font-size: 12px
                    span
                      color: #8e8e8e
                      line-height: 14px
                      font-size: 12px
                      border-right: 1px solid #2f2f32
                      margin-right: 5px
                      padding-right: 5px
                      &:last-child
                        border: none
                        margin: 0
                        padding: 0
      .warning-panel
        margin-bottom: 10px
        background: #212124
        border-radius: 3px
        &_btn
          display: flex
          justify-content: flex-end
        th:last-child
          text-align: end
        .btn-grey
          height: 36px
          padding: 0 20px
          margin: 10px 16px
    .card-item, .card-item:hover
      background: #2f2f32

.btn-secondary--override
  color: #ffffff
  text-shadow: 0 1px 0 rgba(0,0,0,.1)
  background-color: #2a6cd1
  background-image: -webkit-gradient(linear,left top,left bottom,from(#3274d9),to(#1f60c4))
  background-image: -webkit-linear-gradient(top,#3274d9,#1f60c4)
  background-image: -o-linear-gradient(top,#3274d9,#1f60c4)
  background-image: linear-gradient(180deg,#3274d9,#1f60c4)
  background-repeat: repeat-x
  border-color: #3274d9

.checkbox
  width: 165px
  display: flex
  margin-bottom: 6px
  margin-left: 10px
  input
    display: none
  span
    position: absolute
    height: 16px
    width: 16px
    border-radius: 3px
    border: 1px solid #555
    background: #141414
    display: flex
    align-items: center
    justify-content: center
  input:checked+span
    background: linear-gradient(0deg,#eb7b18,#d44a3a)
    border: none
  input:checked+span:before
    font-family: FontAwesome
    content: "\f00c"
    color: #141414
  label
    font-size: 14px
    line-height: 16px
    height: 18px
    padding-left: 24px
    position: relative
    cursor: pointer
.chevron
  display: block
  width: 14px
  min-width: 14px
  height: 24px
  background: url(/public/plugins/devopsprodigy-kubegraf-app/img/chevron.svg) center no-repeat
  margin-right: 6px
  &.active
    transform: rotate(180deg)
.vertical-line
  display: inline-block
  width: 1px
  height: 33px
  background-color: #161719
.namespace-counter
  font-size: 14px
  line-height: 33px
  height: 33px
  color: #8e8e8e
  .active
    color: #c74c2a
.status-indicator
  display: block
  min-width: 6px
  width: 6px
  height: 6px
  border-radius: 100%
  margin-top: 8px
  margin-right: 8px
  &.red, &.error
    background-color: #d34d36
  &.green, &.success
    background-color: #83df57
  &.yellow, &.warning
    background-color: #fcff00
  &.terminating
    background-color: #555555

.dot-grey
  display: block
  min-width: 3px
  width: 3px
  height: 3px
  border-radius: 100%
  margin-top: 5px
  margin-right: 5px
  background-color: #555555

.card-item-label
  margin: -1px 0 0 8px
  position: relative
  cursor: pointer

i.grey
  opacity: 0.3

i.active
  opacity: 1

.override--
  &pod_status
    display: block
    width: 10px
    height: 10px
    border-radius: 100%
    position: absolute
    top: 5px
    left: 0
    &_error
      background: red
    &_warning
      background: yellow
    &_success
      background: #18e018
    &_terminating
      background: #056b11
  &node_status
    display: inline-block
    width: 10px
    height: 10px
    border-radius: 100%
    margin-left: 15px
  &nodeTable_status
    display: block
    width: 10px
    height: 10px
    border-radius: 100%
  &borderBottom
    border-bottom: 1px solid
    padding-bottom: 10px
    padding-top: 10px
    &:last-child
      border-bottom: none
  &borderRight
    border-right: 1px solid
    &:last-child
      border-right: none
  &table
    width: 100%
    tr
      width: 100%
      th:nth-child(1)
        width: 15%
      th:nth-child(2)
        width: 35%
      th:nth-child(3)
        width: 25%
      th:nth-child(4)
        width: 25%
      td:nth-child(1)
        width: 15%
      td:nth-child(2)
        width: 35%
      td:nth-child(3)
        width: 25%
      td:nth-child(4)
        width: 25%
  &table_ns
    width: 100%
    tr
      width: 100%
      th:nth-child(1)
        width: 5%
      th:nth-child(2)
        width: 45%
      th:nth-child(3)
        width: 25%
      th:nth-child(4)
        width: 25%
      td:nth-child(1)
        width: 5%
      td:nth-child(2)
        width: 45%
      td:nth-child(3)
        width: 25%
      td:nth-child(4)
        width: 25%
  &table_ns_6
    width: 100%
    tr
      width: 100%
      th:nth-child(1)
        width: 5%
      th:nth-child(2)
        width: 45%
      th:nth-child(3)
        width: 12.5%
      th:nth-child(4)
        width: 12.5%
      th:nth-child(5)
        width: 12.5%
      th:nth-child(6)
        width: 12.5%
      td:nth-child(1)
        width: 5%
      td:nth-child(2)
        width: 45%
      td:nth-child(3)
        width: 12.5%
      td:nth-child(4)
        width: 12.5%
      td:nth-child(5)
        width: 12.5%
      td:nth-child(6)
        width: 12.5%
  &card-item
    display: inline-block
    padding: 5px
    margin-right: 5px
    margin-bottom: 5px
    &:last-child
      margin-right: 0
  &full-width
    width: 100%

.pulse
  animation-duration: 1s
  animation-name: pulse
  animation-iteration-count: infinite
  animation-direction: alternate

input.toggle-checkbox
  display: none

input[type=checkbox].toggle-checkbox:checked+label:before
    background: url(/public/img/checkbox.png) 0 -18px no-repeat

label.toggle-checkbox
  display: flex
  cursor: pointer
  &:before
    content: ''
    display: inline-block
    width: 22px
    min-width: 22px
    height: 18px
    background: url(/public/img/checkbox.png) 0 0 no-repeat

@keyframes pulse
  @for $i from 0 through 100
    #{$i}%
      opacity: calc(1 - #{$i}/100)

@media (max-width: 980px)
  .page-container--override .page-header
    .header-btn
      display: none
    .mobile-btn
      display: flex

@media (max-width: 769px)
  .page-container--override
    width: 100vw
    left: calc((100% - 100vw)/2)

.explore-toolbar-item
  list-style: inside
